// my-app/src/components/biogComponent/CommentDetail.js
import React, { useEffect, useState } from 'react';
import { getCommentsByBlogId, addComment, deleteComment, replyComment } from '../../util/actions/commentAction';
import { List, Button, Input, Modal, message } from 'antd';
import Cookies from 'js-cookie';

const CommentDetail = ({ blogId }) => {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');
  const [replyContent, setReplyContent] = useState('');
  const [commentModalVisible, setCommentModalVisible] = useState(false);
  const [replyModalVisible, setReplyModalVisible] = useState(false);
  const [replyTo, setReplyTo] = useState(null);
  const token = Cookies.get('token');

  const fetchComments = async () => {
    try {
      const commentData = await getCommentsByBlogId(blogId);
      setComments(commentData);
    } catch (error) {
      console.error(error);
    }
  };

  const handleAddComment = async () => {
    if (!newComment.trim()) return;
    try {
      await addComment(blogId, newComment, token);
      fetchComments();
      setNewComment('');
      setCommentModalVisible(false);
      message.success('评论成功');
    } catch (error) {
      console.error(error);
      message.error('评论失败');
    }
  };

  const handleDeleteComment = async (commentId) => {
    try {
      await deleteComment(commentId, token);
      fetchComments();
      message.success('删除成功');
    } catch (error) {
      console.error(error);
      message.error('删除失败');
    }
  };

  const handleReplyComment = async () => {
    if (!replyContent.trim()) return;
    try {
      await replyComment(replyTo, replyContent, token);
      fetchComments();
      setReplyContent('');
      setReplyModalVisible(false);
      message.success('回复成功');
    } catch (error) {
      console.error(error);
      message.error('回复失败');
    }
  };

  const showReplyModal = (commentId) => {
    setReplyTo(commentId);
    setReplyModalVisible(true);
  };

  const showCommentModal = () => {
    setCommentModalVisible(true);
  };

  const handleReplyCancel = () => {
    setReplyModalVisible(false);
    setReplyContent('');
  };

  const handleCommentCancel = () => {
    setCommentModalVisible(false);
    setNewComment('');
  };

  useEffect(() => {
    fetchComments();
  }, [blogId]);

  const styles = {
    container: {
      padding: '20px',
      borderRadius: '8px',
      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
      backgroundColor: '#fff',
    },
    title: {
      textAlign: 'center',
      fontSize: '24px',
      fontWeight: 'bold',
      marginBottom: '20px',
    },
    commentContainer: {
      display: 'flex',
      flexDirection: 'column',
      gap: '10px',
    },
    comment: {
      padding: '10px',
      border: '1px solid #e8e8e8',
      borderRadius: '4px',
      backgroundColor: '#fafafa',
    },
    button: {
      display: 'block',
      marginLeft: 'auto',
      marginRight: 'auto',
    },
  };

  return (
    <div style={styles.container}>
      <h2 style={styles.title}>评论：</h2>
      <List
        dataSource={comments}
        renderItem={(comment) => (
          <List.Item
            style={styles.comment}
            actions={[
              <Button onClick={() => handleDeleteComment(comment.comment_id)}>删除</Button>,
              <Button onClick={() => showReplyModal(comment.comment_id)}>回复</Button>
            ]}
          >
            {comment.content}
          </List.Item>
        )}
      />
      <Button onClick={showCommentModal} type="primary" style={styles.button}>发表评论</Button>

      <Modal
        title="发表评论"
        visible={commentModalVisible}
        onOk={handleAddComment}
        onCancel={handleCommentCancel}
      >
        <Input.TextArea
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="输入评论内容..."
        />
      </Modal>

      <Modal
        title="回复评论"
        visible={replyModalVisible}
        onOk={handleReplyComment}
        onCancel={handleReplyCancel}
      >
        <Input.TextArea
          value={replyContent}
          onChange={(e) => setReplyContent(e.target.value)}
          placeholder="输入回复内容..."
        />
      </Modal>
    </div>
  );
};

export default CommentDetail;

//     </div>
//   );
// };

// export default CommentDetail;

// my-app/src/components/biogComponent/CommentDetail.js

















// import React, { useEffect, useState } from 'react';
// import { getCommentsByBlogId, addComment, deleteComment, replyComment } from '../../util/actions/commentAction';
// import { List, Button, Input, Modal, message } from 'antd';
// import Cookies from 'js-cookie';

// const CommentDetail = ({ blogId }) => {
//   const [comments, setComments] = useState([]);
//   const [newComment, setNewComment] = useState('');
//   const [replyContent, setReplyContent] = useState('');
//   const [replyVisible, setReplyVisible] = useState(false);
//   const [replyTo, setReplyTo] = useState(null);
//   const token = Cookies.get('token');

//   const fetchComments = async () => {
//     try {
//       const commentData = await getCommentsByBlogId(blogId);
//       setComments(commentData);
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const handleAddComment = async () => {
//     if (!newComment.trim()) return;
//     try {
//       await addComment(blogId, newComment, token);
//       fetchComments();
//       setNewComment('');
//       message.success('评论成功');
//     } catch (error) {
//       console.error(error);
//       message.error('评论失败');
//     }
//   };

//   const handleDeleteComment = async (commentId) => {
//     try {
//       await deleteComment(commentId, token);
//       fetchComments();
//       message.success('删除成功');
//     } catch (error) {
//       console.error(error);
//       message.error('删除失败');
//     }
//   };

//   const handleReplyComment = async () => {
//     if (!replyContent.trim()) return;
//     try {
//       await replyComment(replyTo, replyContent, token);
//       fetchComments();
//       setReplyContent('');
//       setReplyVisible(false);
//       message.success('回复成功');
//     } catch (error) {
//       console.error(error);
//       message.error('回复失败');
//     }
//   };

//   const showReplyModal = (commentId) => {
//     setReplyTo(commentId);
//     setReplyVisible(true);
//   };

//   const handleReplyCancel = () => {
//     setReplyVisible(false);
//     setReplyContent('');
//   };

//   useEffect(() => {
//     fetchComments();
//   }, [blogId]);

//   const styles = {
//     container: {
//       padding: '20px',
//       borderRadius: '8px',
//       boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
//       backgroundColor: '#fff',
//     },
//     title: {
//       textAlign: 'center',
//       fontSize: '24px',
//       fontWeight: 'bold',
//       marginBottom: '20px',
//     },
//     content: {
//       marginBottom: '20px',
//     },
//     comment: {
//       marginBottom: '10px',
//       padding: '10px',
//       border: '1px solid #e8e8e8',
//       borderRadius: '4px',
//       backgroundColor: '#fafafa',
//     },
//     input: {
//       marginBottom: '10px',
//     },
//     button: {
//       display: 'block',
//       marginLeft: 'auto',
//       marginRight: 'auto',
//     },
//   };

//   return (
//     <div style={styles.container}>
//       <h2 style={styles.title}>评论：</h2>
//       <List
//         dataSource={comments}
//         renderItem={(comment) => (
//           <List.Item
//             style={styles.comment}
//             actions={[
//               <Button onClick={() => handleDeleteComment(comment.comment_id)}>删除</Button>,
//               <Button onClick={() => showReplyModal(comment.comment_id)}>回复</Button>
//             ]}
//           >
//             {comment.content}
//           </List.Item>
//         )}
//       />
//       <Input.TextArea
//         value={newComment}
//         onChange={(e) => setNewComment(e.target.value)}
//         placeholder="输入评论内容..."
//         style={styles.input}
//       />
//       <Button onClick={handleAddComment} type="primary" style={styles.button}>发表评论</Button>

//       <Modal
//         title="回复评论"
//         visible={replyVisible}
//         onOk={handleReplyComment}
//         onCancel={handleReplyCancel}
//       >
//         <Input.TextArea
//           value={replyContent}
//           onChange={(e) => setReplyContent(e.target.value)}
//           placeholder="输入回复内容..."
//         />
//       </Modal>
//     </div>
//   );
// };

// export default CommentDetail;
